<style scoped>
.outer{padding: 20px 0;padding-bottom: 120px;}
.head_img_file{--s94-upload-size: 48px;}

.login_out{position: absolute;bottom: 0;width: 100%;padding: 20px;}
</style>
<template>
  <HeaderSlot>
    <van-nav-bar :title="$t('个人信息')" left-arrow @click-left="href_handle(-1)" />
  </HeaderSlot>
  <div class="outer">
    <van-cell-group inset>
      <van-cell center title="头像" is-link>
        <template #value>
          <s94_upload class="head_img_file" v-model="user.head_img" max="1" config="jpg,jpeg,png" reupload :deletable="false" @change="user_edit('head_img',$event)"></s94_upload>
        </template>
      </van-cell>
      <van-field label="昵称" v-model="user.nickname" input-align="right" @change="user_edit('nickname',user.nickname)" />
      <van-cell center title="手机号" :value="user.phone" is-link />
    </van-cell-group>
  </div>
  <div class="login_out">
    <van-button text="退出登录" @click="login_out" round block />
  </div>
</template>

<script>
import {_href} from "@/js/s94_tool.js";
import {href_handle} from "@/vue_plugin/router_auto.js";
import {ajax} from "@/js/api_tool.js";
import s94_upload from "@/components/widget/s94_upload.vue";
import HeaderSlot from "@/components/slot/HeaderSlot.vue";
import {use_this_user} from "@/store/this_user.js";

export default {
  components: {HeaderSlot, s94_upload},

  data(){
    return {
      user: use_this_user(),
    }
  },
  methods:{
    href_handle,
    _href: _href,
    user_edit(key, value){
      let data = {[key]:value};
      ajax({url:"/home/user/edit", data:data, method:'POST', loading:true}, (res)=>{
        this.user[key] = value;
      })
    },
    login_out(){
      ajax({url:"/home/user/loginout", loading:1}, res=>{
        use_this_user().$reset();
        href_handle("/index");
      })
    },
  },
  computed:{},
  mounted(){

  }
}
</script>